<template>
  <div class="header">
    <div class="header-wrapper">
      <router-link to="/type">
        <div class="header-left">
          <div class="header-left-top1">
            <img class="header-left-img" src="static/img/pro-class.png">
          </div>
          <div class="header-left-top2">
            <span class="header-left-span">分类</span>
          </div>
        </div>
      </router-link>
      <div class="header-center">
        <router-link to="/list">
          <div class="header-center-search">搜索</div>
        </router-link>
      </div>
      <router-link to="/user">
        <div class="header-right">
          <div class="header-right-top1">
            <img class="header-right-img" src="static/img/my_tab_4_sel_shequ.png">
          </div>
          <div class="header-right-top2">
            <span class="header-right-span">我的</span>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartHeader'
}
</script>

<style lang="stylus" scoped>
.header
  background: #f8f8f8
  position: fixed
  z-index: 80
  width: 100%
  padding: 0.12rem 0
  font-size: 0
  .header-wrapper
    width: 100%
    float: left
    position: relative
    .header-left
      display: inline-block
      width: 15%
      vertical-align: middle
      margin: 0 1%
      .header-left-top1
        width: 100%
        text-align: center
        .header-left-img
          width: 0.44rem
          height: 0.44rem
      .header-left-top2
        width: 100%
        text-align: center
        color: grey
        line-height: 0.2rem
        margin-top: 0.04rem
        .header-left-span
          font-size: 0.22rem
    .header-center
      display: inline-block
      width: 71%
      vertical-align: middle
      .header-center-search
        font-size: 0.2866rem
        line-height: 0.6rem
        color: #c3c3c3
        background: url('/static/img/icon_search.png') no-repeat 0.2rem 0.16rem
        background-color: white
        background-size: 0.28rem
        text-indent: 0.6rem
        height: 0.6rem
        width: 100%
        vertical-align: middle
        border-radius: 0.3rem
        border-width: 0
    .header-right
      display: inline-block
      width: 10%
      vertical-align: middle
      margin: 0 0 0 1%
      .header-right-top1
        width: 100%
        text-align: center
        .header-right-img
          width: 0.44rem
          height: 0.44rem
      .header-right-top2
        width: 100%
        text-align: center
        color: grey
        line-height: 0.2rem
        margin-top: 0.04rem
        .header-right-span
          font-size: 0.22rem
</style>
